<template>
	<view class="uiwu-button-update" @tap.stop="updateImage">
		<slot>
			<view class="uiwu-button-update-box uiwu-flex uiwu-flex-center">
				<image src="/static/update.png" mode="widthFix"></image>
			</view>
		</slot>
		<view v-if="showClose" @tap.stop="emits('deleImage')">
			<uiwu-icon color="#dcdcdc" type="clear" size="32" class="uiwu-icon"></uiwu-icon>
		</view>
	</view>
</template>
<script setup lang="ts">
/**
 *  uiwu-button-update 图片上传组件
 * @property {Number} count 图片选择数量 默认 1 
 * @property {String} postUrl 接口请求地址  如果为空的话，会默认返回图片本地路径 
 * @property {String} name 服务器接受的文件名称  默认 file
 * @property {Object} formData 额外参数 {} 
 * @property {Boolean} isUpdate 是否禁止上传 默认不是 注意 false代表禁止上传  true 代表可以这里没有设计好，懒得修改了 
 * @property {Boolean} showClose 是否显示删除按钮 默认false
 * @property {Boolean} isVideo 是否是上传视频 默认false
 * @event {Function()} change 回调图片地址
 * @event {Function()} changeWatch 监听图片上传进度  0-100  进度值  
 * @event {Function()} error 图片上传失败回调 
 * @event {Function()} deleImage 点击删除按钮 
 */
import { uiwu } from '@/api/interface/interface';
import { inject } from 'vue';
const emits = defineEmits(['change', 'error', 'changeWatch', 'deleImage'])
const props = defineProps({
	count: {
		default: 1,
		type: Number
	},
	postUrl: {
		default: 'upload/image',
		type: String
	},
	name: {
		default: 'file',
		type: String
	},
	formData: {
		default: () => {
			return {}
		},
		type: Object
	},
	isUpdate: {
		default: true,
		type: Boolean
	},
	showClose: {
		default: false,
		type: Boolean
	},
	isVideo: {
		default: false,
		type: Boolean
	}
})
/**
 * updateImage 选择图片上传
 */
const updateImage = async () => {
	if (!props.isUpdate) return false
	const isPOpup = uni.getStorageSync('isPopup') || null

	// #ifndef WEB
	if (!isPOpup && uiwu.system() == 'android') {
		await uiwu.model({
			title: '温馨提示',
			content: '在您授权相机、相册存储权限后可使用该功能上传您的照片/图片、也可拍摄照片用于申诉图片上传',
			showCancel: false,
			confirmText: '我知道了'
		})
		uni.setStorageSync('isPopup', true)
	}
	// #endif

	const urlPath = await getImage(props.count)
	if (!props.postUrl) {
		emits('change', urlPath)
		return
	}
	urlPath.length == 1 ? update(urlPath[0]) : imageMap(urlPath)
}
/**
 * imageMap 图片遍历循环输出
 * @param {Array} e 图片数组
 */
const imageMap = (e) => {
	e.map((val) => {
		update(val)
	})
}
/**
 * getImage 选择图片
 * @property {Number} count 一次选择图片的数量 默认1 
 */
const getImage = (count = 1) => {
	return new Promise((callback) => {
		if (props.isVideo) {
			uni.chooseVideo({
				success: ({ tempFilePath }) => {
					callback([tempFilePath])
				},
				fail: (err) => {
					console.log(err);
				}
			})

		} else {
			uni.chooseImage({
				count,
				success: ({ tempFilePaths }) => {
					callback(tempFilePaths)
				},
				fail: async (err) => {
					console.log(err);
				}
			})
		}
	})
}
/**
 * update 发起图片上传
 */
const update = async (filePath) => {
	const data = await uiwu.updatefile({
		url: props.postUrl,
		filePath,
		name: props.name,
		formData: { ...props.formData },
		fileType: props.isVideo ? 'video' : 'image',
		success: (e) => {
			emits('changeWatch', ((e.totalBytesSent / e.totalBytesExpectedToSend) * 100).toFixed(0))
		}
	})
	if (data.status !== 200) {
		emits('error', data.msg)
		return
	}
	emits('change', data)
}
</script>
<style lang="scss" scoped>
.uiwu-button-update-box {
	width: 180rpx;
	height: 160rpx;
	background: rgba(#515B81, 0.2);
	border-radius: 16rpx;

	image {
		width: 64rpx !important;
	}
}

.uiwu-button-update {
	position: relative;
}

.uiwu-icon {
	position: absolute;
	right: -15rpx;
	top: -15rpx;
	z-index: 99;
}
</style>
